<template>
	<div ref="wrapper">
		<slot></slot>
	</div>
</template>

<script>
import  BScroll from 'better-scroll'
export default {
	data() {
		return {}
	},
	props: {
		probeType: {		//是否监测实时滚动，值为3的时候就是实时监测
			type: Number,
			default: 1
		},
		click: {			//是否可点击
			type: Boolean,
			default: true
		},
		data: {				//接口数据
			type: Array,
			default: null
		},
		listenScroll: {		//是否监听滚动事件
			type: Boolean,
			default: false
		}
	},
	mounted() {
		setTimeout(() => {
			this._initScroll()
		}, 20)
	},
	methods: {
		//初始化scroll
		_initScroll(){
			if(!this.$refs.wrapper) {
				//还没有加载这个元素就不要初始化，不然会报错
				return
			}
			this.scroll = new BScroll(this.$refs.wrapper, {
				probeType: this.probeType,
				click: this.click,
			})

			//监听页面滚动
			if(this.listenScroll) {
				//保留vue实例的this,把当前位置传过去
				let _this = this
				this.scroll.on('scroll', (pos) => {
					//向父元素派发事件
					_this.$emit('scroll', pos)
				})
			}
		},
		enable() {
			this.scroll && this.scroll.enable()
		},
		disable() {
			this.scroll && this.scroll.disable()
		},
		//重新刷新
		refresh() {
			this.scroll && this.scroll.refresh()
		},
		//滚动到目标位置
		scrollTo() {
			//把参数传到scroll的参数里面去
			this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
		},
		//滚动到指定元素
		scrollToElement() {
			this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
		}

	},
	watch: {
		//监视data的变化
		data(){
			setTimeout(() => {
				//data变化，重新加载scroll
				this.refresh()
			}, 20)
		}
	}
}
</script>
<style  lang="less" scoped>

</style>
